import React from 'react';
import ReactHighstock from 'react-highcharts/ReactHighstock.src';

const data = [
    [1220832000000, 22.56],
    [1220918400000, 21.67],
    [1221004800000, 21.66],
    [1221091200000, 21.81],
    [1221177600000, 21.28],
    [1221436800000, 20.05],
    [1221523200000, 19.98],
    [1221609600000, 18.26],
    [1221696000000, 19.16],
    [1221782400000, 20.13],
    [1222041600000, 18.72],
    [1222128000000, 18.12],
    [1222214400000, 18.39],
    [1222300800000, 18.85],
    [1222387200000, 18.32],
    [1222646400000, 15.04],
    [1222732800000, 16.24],
    [1222819200000, 15.59],
    [1222905600000, 14.3],
    [1222992000000, 13.87],
    [1223251200000, 14.02],
    [1223337600000, 12.74],
    [1223424000000, 12.83],
    [1223510400000, 12.68],
    [1223596800000, 13.8],
    [1223856000000, 15.75],
    [1223942400000, 14.87],
    [1224028800000, 13.99],
    [1224115200000, 14.56],
    [1224201600000, 13.91],
    [1224460800000, 14.06],
    [1224547200000, 13.07],
    [1224633600000, 13.84],
    [1224720000000, 14.03],
    [1224806400000, 13.77],
    [1225065600000, 13.16],
    [1225152000000, 14.27],
    [1225238400000, 14.94],
    [1225324800000, 15.86],
    [1225411200000, 15.37],
    [1225670400000, 15.28],
    [1225756800000, 15.86],
    [1225843200000, 14.76],
    [1225929600000, 14.16],
    [1226016000000, 14.03],
    [1226275200000, 13.7],
    [1226361600000, 13.54],
    [1226448000000, 12.87],
    [1226534400000, 13.78],
    [1226620800000, 12.89],
    [1226880000000, 12.59],
    [1226966400000, 12.84],
    [1227052800000, 12.33],
    [1227139200000, 11.5],
    [1227225600000, 11.8],
    [1227484800000, 13.28],
    [1227571200000, 12.97],
    [1227657600000, 13.57],
    [1227830400000, 13.24],
    [1228089600000, 12.7],
    [1228176000000, 13.21],
    [1228262400000, 13.7],
    [1228348800000, 13.06],
    [1228435200000, 13.43],
    [1228694400000, 14.25],
    [1228780800000, 14.29],
    [1228867200000, 14.03],
    [1228953600000, 13.57],
    [1229040000000, 14.04],
    [1229299200000, 13.54],
];

const config = {
    rangeSelector: {
        selected: 1,
    },
    title: {
        text: 'AAPL Stock Price',
    },
    series: [
        {
            name: 'AAPL',
            data,
            tooltip: {
                valueDecimals: 2,
            },
        },
    ],
};

const HighstockComponent = () => {
    return <ReactHighstock config={config} />;
};

export default HighstockComponent;
